<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">  
    <f:view contentType="text/html">
    <h:head>  
        <title>Segunda prueba visual</title>
        <link type="text/css" rel="stylesheet" href="./Theme/jquery-ui-1.8.16.custom.css"/>
    </h:head>  

    <h:body>  
        <p:layout fullPage="true">
            <p:layoutUnit position="top" height="120" >
                <h:outputText value="Contenido de cabecera." />
            </p:layoutUnit>



            <p:layoutUnit position="bottom" height="50">
                <h:outputText value="Contenido de pie de página." />
            </p:layoutUnit>

            <p:layoutUnit position="right" header="Panel colapsable" width="200" resizable="true" collapsible="true">
                <h:outputText value="Contenido de panel derecho" />
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <h:form>
                    <p:growl id="growl"  sticky="false" life="2000"/>                    
                    <p:accordionPanel id="panel" collapsible="true" autoHeight="true">
                        <p:tab title="Crear Usuario">
                        <p:focus />  
                        <p:messages />  
                        <h:panelGrid columns="3">  
                            <h:outputLabel for="nombre" value="Nombre *" />  
                            <p:inputText id="nombre" required="true" label="Nombre"  
                                         value="#{personBean.firstname}" >  
                                <f:validateLength minimum="2" />  
                            </p:inputText>  
                            <p:message for="apellido" />  
                            <h:outputLabel for="apellido" value="Apellido *" />  
                            <p:inputText id="apellido" required="true" label="Apellido"  
                                         value="#{personBean.surname}" />  
                            <p:message for="apellido" />  
                        </h:panelGrid>  
                        <p:commandButton value="Crear" update="growl" 
                                         actionListener="#{personBean.savePerson}" />  
                        </p:tab>
                        <p:tab title="Calendario">
                            
                            <h:form>
                                <h:outputLabel for="calendar" value="Introduzca una fecha:  "/>
                                <p:calendar id="calendar" value="#{calendarBean.date}" effect="slide" locale="es"/>  
                            </h:form>  
                           
                        </p:tab>
                        
                    </p:accordionPanel>  
                </h:form>  




            </p:layoutUnit>
        </p:layout>


    </h:body> 
        </f:view>
</html>

